<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-model结合checkbox</title>
</head>
<body>

<div id="app">
  <h2>v-model结合checkbox单选</h2>
  <label for="agree">
    <input type="checkbox" id="agree" value="同意" v-model="isAgree">同意协议
  </label>
  <hr>
  <button :disabled="!isAgree">下一步</button>
  <hr>
  <h2>v-model结合checkbox多选</h2>
  <input type="checkbox" v-model="hobbies" value="篮球">篮球
  <input type="checkbox" v-model="hobbies" value="足球">足球
  <input type="checkbox" v-model="hobbies" value="乒乓球">乒乓球
  <input type="checkbox" v-model="hobbies" value="羽毛球">羽毛球

  <h2>你的爱好有：{{hobbies}}</h2>

</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好',
      isAgree: false,
      hobbies: []
    }
  })
</script>
</body>
</html>
